<template>
  <article class="product-card">
    <div class="product-card__media">
      <NuxtLink :to="productLink" class="product-card__image-wrapper">
        <img :src="product.thumbnail" :alt="product.name" class="product-card__image" />
        <div v-if="product.inventoryStatus === 'low_stock'" class="product-card__status product-card__status--warning">余量紧张</div>
        <div v-else-if="product.inventoryStatus === 'preorder'" class="product-card__status product-card__status--info">预定中</div>
      </NuxtLink>
      <div class="product-card__badges">
        <span v-for="badge in product.badges" :key="badge.label" class="product-card__badge" :class="`product-card__badge--${badge.type}`">
          <i class="fas fa-circle"></i>
          {{ badge.label }}
        </span>
      </div>
    </div>
    <div class="product-card__body">
      <NuxtLink :to="productLink" class="product-card__title text-ellipsis-2">
        {{ product.name }}
      </NuxtLink>
      <p class="product-card__subtitle text-ellipsis">
        {{ product.subtitle }}
      </p>
      <div class="product-card__tags">
        <span v-for="tag in product.tags" :key="tag" class="product-card__tag">{{ tag }}</span>
      </div>
      <div class="product-card__meta">
        <div class="product-card__meta-item">
          <i class="fas fa-map-marker-alt"></i>
          {{ product.origin }}
        </div>
        <div class="product-card__meta-item">
          <i class="fas fa-warehouse"></i>
          {{ product.supplyType }}
        </div>
      </div>
      <div class="product-card__footer">
        <div class="product-card__price">
          <span class="product-card__price-current">¥{{ product.price.toFixed(2) }}</span>
          <span v-if="product.originalPrice" class="product-card__price-original">¥{{ product.originalPrice.toFixed(2) }}</span>
          <span class="product-card__unit">/ {{ product.unit }}</span>
        </div>
        <div class="product-card__stats">
          <span class="product-card__stat"><i class="fas fa-star"></i>{{ product.rating.toFixed(1) }}</span>
          <span class="product-card__stat"><i class="fas fa-comments"></i>{{ product.reviewCount }}</span>
          <span class="product-card__stat"><i class="fas fa-fire"></i>{{ product.salesVolume }}</span>
        </div>
      </div>
      <div class="product-card__actions">
        <button type="button" class="product-card__btn product-card__btn--primary">立即询价</button>
        <NuxtLink :to="productLink" class="product-card__btn product-card__btn--secondary">查看详情</NuxtLink>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { ProductSummary } from '@/types/product';

const props = defineProps<{ product: ProductSummary }>();

const productLink = computed(() => `/product/${props.product.id}`);
</script>

<style lang="scss" scoped>

.product-card {
  display: flex;
  flex-direction: column;
  background: $bg-white;
  border-radius: $border-radius-lg;
  box-shadow: $box-shadow-base;
  overflow: hidden;
  transition: transform $transition-base ease, box-shadow $transition-base ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: $box-shadow-lg;
  }

  &__media {
    position: relative;
    overflow: hidden;
  }

  &__image-wrapper {
    display: block;
  }

  &__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform $transition-base ease;
  }

  &:hover &__image {
    transform: scale(1.03);
  }

  &__status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: $border-radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: $text-white;

    &--warning {
      background: $warning-color;
    }

    &--info {
      background: $primary-blue;
    }
  }

  &__badges {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    gap: 10px;
  }

  &__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: $border-radius-base;
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    background: rgba(255, 255, 255, 0.85);

    &--primary { color: $primary-red; }
    &--success { color: $success-color; }
    &--warning { color: $warning-color; }
    &--info { color: $info-color; }
    &--danger { color: $danger-color; }
  }

  &__body {
    padding: $spacing-md;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  &__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: $text-primary;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__subtitle {
    font-size: $font-size-sm;
    color: $text-secondary;
    margin-bottom: $spacing-sm;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: $spacing-sm;
  }

  &__tag {
    padding: 2px 8px;
    border-radius: $border-radius-base;
    font-size: $font-size-xs;
    background: $bg-light-gray;
    color: $text-secondary;
  }

  &__meta {
    display: flex;
    gap: $spacing-md;
    font-size: $font-size-sm;
    color: $text-secondary;
    margin-bottom: $spacing-sm;

    i {
      margin-right: 4px;
      color: $primary-red;
    }
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $spacing-sm;
  }

  &__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }

  &__price-current {
    font-size: 22px;
    color: $primary-red;
    font-weight: $font-weight-bold;
  }

  &__price-original {
    font-size: $font-size-sm;
    color: $text-tertiary;
    text-decoration: line-through;
  }

  &__unit {
    font-size: $font-size-sm;
    color: $text-secondary;
  }

  &__stats {
    display: flex;
    align-items: center;
    gap: 10px;
    color: $text-secondary;
    font-size: $font-size-sm;
    white-space: nowrap;

    i {
      margin-right: 4px;
      color: $warning-color;
    }
  }

  &__stat {
    display: inline-flex;
    align-items: center;
  }

  &__actions {
    display: flex;
    gap: $spacing-sm;
    margin-top: auto;
  }

  &__btn {
    flex: 1;
    border-radius: $border-radius-base;
    padding: 10px 0;
    font-size: $font-size-base;
    text-align: center;
    font-weight: $font-weight-medium;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all $transition-base ease;

    &--primary {
      background: $primary-red;
      color: $text-white;
      border-color: $primary-red;

      &:hover {
        background: darken($primary-red, 6%);
      }
    }

    &--secondary {
      background: $bg-white;
      color: $primary-red;
      border-color: rgba($primary-red, 0.3);

      &:hover {
        color: $text-white;
        background: $primary-red;
      }
    }
  }
  
  // 高分辨率屏幕下的优化
  @include desktop-4k {
    &__title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &__subtitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &__price {
      white-space: nowrap;
    }
    
    &__stats {
      white-space: nowrap;
    }
    
    &__meta {
      white-space: nowrap;
      
      &-item {
        white-space: nowrap;
      }
    }
  }
  
  @include desktop-5k {
    &__title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &__subtitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &__price {
      white-space: nowrap;
    }
    
    &__stats {
      white-space: nowrap;
    }
    
    &__meta {
      white-space: nowrap;
      
      &-item {
        white-space: nowrap;
      }
    }
  }
}
</style>
